<template>
	<view class="content">
		<contont-nav-bar />
		<group-frame>
			<view slot="list" class="list">
				<group-list :minorList="mainCabinet.minorList" />
			</view>
			<view slot="left" class="left" @tap="onMonitoring">
				<image src="/static/images/group/video.png" alt="" mode="widthFix" />
				<text>监控视频</text>
			</view>
			<view slot="center" class="center" @click="modifyMainName">
				<view class="name">{{mainCabinet.mainType}}：{{mainCabinet.mainName}}</view>
				<image src="/static/images/group/edit_w.png" alt="" mode="widthFix" />
			</view>
			<view slot="right" class="right" @tap="onClose">
				<image src="/static/images/group/back.png" alt="" mode="widthFix" />
				<text>返回</text>
			</view>
		</group-frame>
		<uni-drawer class="drawer" :width="50" ref="drawer" mode="right" :maskClick="false">
			<drawer-top title="主柜信息" @drawerClose="drawerClose" />
			<!-- <check-radio :titleType="['综合柜','层架柜','挂架柜']" /> -->
			<view class="contentTypeRadio">
				<view class="titleR">柜体类型：</view>
				<radio-group class="radioTypeTop" @change="radioChange">
					<label class="radioInfo" v-for="(item,index) in titleType" :key="index">
						<view>
							<radio color="#007AFF" :value="index" :checked="index===typeCurrent" />
						</view>
						<view class="radioText">{{item}}</view>
					</label>
				</radio-group>
			</view>
			<check-name />
			<!-- <view class="contentBox">
				<view class="btitle">刷卡器：</view>
				<input type="text"
					class="name_box"
					placeholder="请填写卡号"
					@focus="isFocus = true"
					@blur="blurStyle"
					:class="{focusstyle:isFocus}"
					v-model="cabCard"
				/>		
			</view> -->
			<Spicks titleName="刷卡器" ref="cardSpicks" :array="card_list" :index="card_index" />
	
			<view class="contentBoxR">
				<view class="titleR">RFID：</view>
				<checkbox-group class="checkBtn" @change="checkboxChange">
					<label class="checkInfo" v-for="(checkItem,index) in checkList" :key="checkItem.name">
						<view>
							<checkbox :value="checkItem.name" :checked="rfid.indexOf(checkItem.name)>=0" />
						</view>
						<view class="checkText">{{checkItem.name}}</view>
					</label>
				</checkbox-group>
			</view>
			<view class="contentBoxRadio">
				<view class="titleR">门开关：</view>
				<radio-group class="radioTop" @change="doorRadioChange">
					<label class="radioInfo" v-for="(item,index) in door_list" :key="index">
						<view>
							<radio color="#007AFF" :value="item.name" :checked="door==item.name" />
						</view>
						<view class="radioText">{{item.name}}</view>
					</label>
				</radio-group>
			</view>
			<!-- <view class="contentTypeRadio">
				<view class="titleR">刷卡器：</view>
				<radio-group class="radioTypeTop" @change="cardRadioChange">
					<label class="radioInfo" v-for="(item,index) in card_list" :key="index">
						<view>
							<radio color="#007AFF" :value="item.name" />
						</view>
						<view class="radioText">{{item.name}}</view>
					</label>
				</radio-group>
			</view> -->
			<!-- <view class="contentTypeRadio">
				<view class="titleR">扫码器：</view>
				<radio-group class="radioTypeTop" @change="scanRadioChange">
					<label class="radioInfo" v-for="(item,index) in scan_list" :key="index">
						<view>
							<radio color="#007AFF" :value="item.deviceId" :checked="scan==item.deviceId" />
						</view>
						<view class="radioText">{{item.name}}</view>
					</label>
				</radio-group>
			</view> -->
			<!-- <view class="contentBox">
				<view class="btitle">编号：</view>
				<input type="text"
					class="name_box"
					placeholder="请填写机柜的编号"
					@focus="isFocus2 = true"
					@blur="blurStyle2"
					:class="{focusstyle:isFocus2}"
					v-model="serial_number"
				/>		
			</view> -->
			<!-- <Spicks titleName="刷卡器" ref="cardSpicks" :array="card_list" :index="card_index" /> -->
			<!-- <Spicks titleName="RFID" ref="rfidSpicks"  :array="rfid_list" :index="rfid_index" /> -->
			<!-- <Spicks titleName="扫码器" ref="scanSpicks" :array="scan_list" :index="scan_index" /> -->
			<!-- <Spicks titleName="门开关" ref="doorSpicks" :array="door_list" :index="door_index" /> -->
			<submit-button title="修改" @click.native="submitClick" />
		</uni-drawer>
		<pop-up id="pop" ref="popup" type="dialog">
			<pop-up-dialog class="dialog" mode="base" content="确定修改柜体信息吗？" type="info" @confirm="confirmDialog()" />
		</pop-up>
	</view>
</template>

<script>
	import Spicks from '../../components/common/spicks.vue'
	import {
		mapState
	} from 'vuex'
	import {
		getCabinet,
		addMasterCabinet,
		setMasterCabinet
	} from "../../utils/api.js"
	import GroupList from "../../components/group/group-list.vue"
	import ContontNavBar from '../../components/common/contont-nav-bar.vue'
	import GroupFrame from "../../components/group-frame/group-frame.vue"
	import UniDrawer from "../../components/uni-drawer/uni-drawer.vue"
	import CheckRadio from "../../components/common/check/check-radio.vue"
	import CheckName from "../../components/common/check/check-name.vue"
	import SubmitButton from "../../components/common/submit-button.vue"
	import DrawerTop from "../../components/common/drawer-top.vue"
	import PopUp from "../../components/uni-popup/uni-popup.vue"
	import PopUpDialog from "../../components/uni-popup-dialog/uni-popup-dialog.vue"

	export default {
		components: {
			GroupList,
			ContontNavBar,
			GroupFrame,
			UniDrawer,
			CheckRadio,
			CheckName,
			SubmitButton,
			DrawerTop,
			PopUp,
			PopUpDialog,
			Spicks
		},

		data() {
			return {
				// serial_number: "",
				card_index: 0,
				// scan_index: 0,
				// rfid_index: 0,
				// door_index: 0,
				typeCurrent: 0, //主柜默认选中的类型
				card_list: [{
					name: ""
				}],
				scan_list: [{
					name: ""
				}],
				checkList: [
					{
						name: '1'
					},
					{
						name: '2'
					},
					{
						name: '3'
					},
					{
						name: '4'
					},
					{
						name: '5'
					},
					{
						name: '6'
					},
					{
						name: '7'
					},
					{
						name: '8'
					},
					{
						name: '9'
					},
					{
						name: '10'
					},
					{
						name: '11'
					},
					{
						name: '12'
					},
					{
						name: '13'
					},
					{
						name: '14'
					},
					{
						name: '15'
					},
					{
						name: '16'
					},
				],
				rfid_list: [
					{
						name: 1
					},
					{
						name: 2
					},
					{
						name: 3
					}, 
					{
						name: 4
					}, 
					{
						name: 5
					}, 
					{
						name: 6
					}, 
					{
						name: 7
					}, 
					{
						name: 8
					}, 
					{
						name: 9
					}, 
					{
						name: 10
					}, 
					{
						name: 11
					}, 
					{
						name: 12
					}, 
				],
				door_list: [{
					name: '1'
				}, {
					name: '2'
				}, {
					name: '3'
				}, {
					name: '4'
				}, {
					name: '5'
				}, {
					name: '6'
				}, {
					name: '7'
				}, {
					name: '8'
				}],
				// isFocus2: false,
				// type: null,
				// isFocus: false,
				titleType: ['综合柜', '层架柜', '挂架柜'],
				
				cabType: '',
				// cabCard:'',
				// card: '', //刷卡
				rfid: [], //rfid
				scan: '', //扫码
				door: '', //门开关
			}
		},
		computed: {
			...mapState(['mainCabinet'])
		},
		onLoad() {
			this.card_list = uni.getStorageSync("card_list")
			this.scan_list = uni.getStorageSync("scan_list")
		},
		onShow() {
			console.log("onShow")
			console.log(this.mainCabinet);
			// if (this.mainCabinet.type == 1) {
			// 	this.cabType = "层架柜"
			// } else if (this.mainCabinet.type == 2) {
			// 	this.cabType = "挂架柜"
			// } else if (this.mainCabinet.type == 3) {
			// 	this.cabType = "挂架柜"
			// }
			this.loadCabinet()
		},
		methods: {
			// blurStyle(){
			// 	this.isFocus = false;
			// 	if(this.cabCard===''){
			// 		uni.showToast({
			// 			title:"卡号不能为空"
			// 		})
			// 		return
			// 	}
			// },
			// cardRadioChange(e) { //刷卡器
			// 	console.log(e);
			// 	this.card = e.detail.value
			// },
			scanRadioChange(e) { //扫码器
				console.log(e);
				this.scan = e.detail.value
			},
			doorRadioChange(e) { //门开关
				console.log(e);
				this.door = e.detail.value
			},
			checkboxChange(e) { //rfid
				console.log(e);
				this.rfid = e.detail.value
			},
			radioChange(e) { //柜子类型
				console.log(e);
				this.typeCurrent = e.detail.value
			},
			loadCabinet() {
				console.log(this.card_list)
				console.log(this.scan_list)
				let that = this
				this.card_list.forEach(function(item, index) {
					if (item.deviceId == that.mainCabinet.card_id) {
						that.card_index = index
					}
				})
				this.scan_list.forEach(function(item, index) {
					if (item.deviceId == that.mainCabinet.scan_id) {
						console.log(item.deviceId)
						that.scan = item.deviceId
					}
				})
				this.rfid = this.mainCabinet.rfid_id
				this.door = this.mainCabinet.door_id
				this.typeCurrent = this.mainCabinet.type - 1
			},
			modifyMainName() {
				this.typeCurrent = this.mainCabinet.type - 1
				this.$refs.drawer.open();
			},
			drawerClose() {
				this.$refs.drawer.close();
			},
			submitClick(e) {
				// this.loadCabinet()
				console.log(this.mainCabinet.mainName);
				// if(this.mainCabinet.mainName.trim() == ''){
				// 	uni.$emit('checkFocus')
				// 	return
				// }
				this.$refs.popup.open();
			},
			// async SetUpClick() { //主柜
			// 	this.$store.commit('checkMainInfo');
			// 	this.isMainType()
			// 	const { data } = await addMasterCabinet({
			// 		name: this.mainName,
			// 		type: this.type
			// 	})
			// 	console.log('主柜id',data);
			// 	// this.masterCabinetId = data
			// 	this.$store.commit('setId',data)
			// 	this.drawerClose()
			// },	
			confirmDialog() {
				// this.$store.commit('checkMainInfo');
				// this.$store.commit('checkModifyType', this.typeCurrent + 1)
				console.log(this.scan_list)
				console.log(this.scan)
				setMasterCabinet({
					name: this.mainCabinet.mainName,
					type: this.typeCurrent+1,
					terminalId: this.mainCabinet.terminalId
				}).then(res => {
					console.log('修改主柜', res);
					let mainType = "综合柜"
					if (this.typeCurrent == 2) {
						mainType = "层架柜"
					} else if (this.typeCurrent == 3) {
						mainType = "挂架柜"
					}
					console.log("ssdsdsdsdsdsds",this.$refs.cardSpicks.select_index,this.scan,this.rfid,this.door)
					console.log(this.$store.state.mainCabinet.mainName);
					let mainCabinet = {
						type: this.typeCurrent,
						mainType: mainType,
						card_id: this.card_list[this.$refs.cardSpicks.select_index].deviceId,
						// scan_id: this.scan,
						rfid_id:this.rfid,
						door_id:this.door,
					}
					console.log(mainCabinet)
					this.$store.dispatch('initCab', mainCabinet)
					this.$refs.popup.close();
					this.$refs.drawer.close()
				})
			},
			onClose() {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			},
			onMonitoring() {
				uni.redirectTo({
					url: "../monitoring/monitoring"
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.content {
		position: relative;
		width: 100vw;
		height: 100vh;
	}

	.list {
		overflow-x: hidden;
		overflow-y: scroll;
		// height:1162rpx;
		height: 75.75vh;

	}

	.left,
	.right {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 312rpx;
		height: 88rpx;
		background: #fff;
		border-radius: 88px;
		font-size: 40rpx;
		color: #61ADFF;
		font-weight: 400;
	}

	.left image {
		margin-right: 20rpx;
		width: 66rpx;
		height: 40rpx;
	}

	.center {
		display: flex;
		align-items: center;
	}

	.center .name {
		font-size: 52rpx;
		color: #fff;
		;
		// margin: 0 8rpx;
	}

	.center image {
		margin-left: 40rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.right {
		// width:48rpx;
		width: 250rpx;
	}

	.right image {
		margin-right: 20rpx;
		width: 48rpx;
		height: 40rpx;

	}

	#pop {
		z-index: 1000;

		.dialog {
			width: 700rpx;
		}
	}

	.contentBox {
		background:#F1F9FF;
		border-radius: 20rpx;
		// width: 790rpx;
		// width: 27.44vw;
		width: 45.44vw;
		margin: 0 auto;
		// margin-bottom: 30rpx;
		margin-bottom: 1.97vh;
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		.btitle {
			color: #777777;
			font-size: 34rpx;
			padding:24rpx 2rpx 24rpx 36rpx;
			box-sizing: border-box;
		}
		.name_box {
			// width:584rpx;
			// height: 88rpx;
			width: 20.25vw;
			height: 5.7vh;
			// line-height: 80rpx;
			line-height: 5.5vh;
			background: #FFFFFF;
			border: 4rpx solid #CCCCCC;
			border-radius:20rpx;
			font-size:36rpx;
			padding-left:45rpx;
			margin-left: 24rpx;
			color: #222;
			box-sizing: border-box;
		}
	}
	
	.focusstyle {
		border: 4rpx solid #4F9AFF !important;
	}




	.contentTypeRadio {
		background: #F1F9FF;
		border-radius: 20rpx;
		// width: 790rpx;
		width: 45.44vw;
		margin: 0 auto;
		display: flex;
		// margin-top: 30rpx;
		// margin-bottom: 30rpx;
		margin-top: 1.97vh;
		margin-bottom: 1.97vh;
		.radioTypeTop {
			display: flex;
			align-items: center;
			padding: 34rpx 0 34rpx 30rpx;
		}
	}
	.contentBoxRadio {
		background: #F1F9FF;
		border-radius: 20rpx;
		// width: 790rpx;
		width: 45.44vw;
		margin: 0 auto;
		// margin-top: 30rpx;
		// margin-bottom: 30rpx;
		margin-top: 1.97vh;
		margin-bottom: 1.97vh;
		.radioTop {
			display: flex;
			align-items: center;
			padding: 0 0 34rpx 30rpx;
		}
	}
	.titleR {
		color: #777777;
		font-size: 34rpx;
		padding: 34rpx 0 34rpx 30rpx;
	}
	.radioInfo {
		display: flex;
		align-items: center;
		margin-right: 60rpx;

		.radioText {
			font-size: 34rpx;
			color: #777777;
		}
	}
	.contentBoxR {
		background: #F1F9FF;
		border-radius: 20rpx;
		// width: 790rpx;
		width: 45.44vw;
		margin: 0 auto;
		// margin-top: 30rpx;
		// margin-bottom: 30rpx;
		margin-top: 1.97vh;
		margin-bottom: 1.97vh;
		.titleR {
			color: #777777;
			font-size: 34rpx;
			padding: 34rpx 0 34rpx 30rpx;
		}
		.checkBtn {
			display: flex;
			flex-flow: row wrap;
			padding: 0 0 0 15px;
		}
		.checkInfo {
			display: flex;
			align-items: center;
			margin: 0 30rpx 20rpx 0;
		}
		.checkText {
			font-size: 34rpx;
			color: #777777;
		}
	}
</style>
